<template>
  <div class="detail">
    <Header :title="branchname"/>
    <div id="date_time_picker">

      <!-- 开始时间 输入框 -->
      <van-field
        v-model="startValue"
        placeholder="开始时间"
        readonly
        @click="showStartTime()"/>
      <!-- 结束时间 输入框 -->
      <van-field
        v-model="endValue"
        placeholder="结束时间"
        readonly
        @click="showEndTime()"/>
      <!-- 开始 弹出层 -->
      <van-popup
        v-model="showStart"
        position="bottom"
        :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="startTime"
          type="date"
          :max-date="currentTime"
          @confirm="confirmStartFn()"
          @cancel="cancelFn()"/>
      </van-popup>
      <!-- 结束 弹出层 -->
      <van-popup
        v-model="showEnd"
        position="bottom"
        :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="endTime"
          type="date"
          :min-date="startTime"
          :max-date="currentTime"
          @confirm="confirmEndFn()"
          @cancel="cancelFn()"/>
      </van-popup>
    </div>
    <div class="detail-header">
      <div class="total-money">{{branchIncomeList.branchallincome}}</div>
      <div class="total-income">总收入 (元)</div>
      <!--     支付方式-->
      <div class="style">
        <div class="item">
          <span class="text">现金</span>
          <span class="num">{{branchIncomeList.branchmoney}}</span>
        </div>
        <div class="item">
          <span class="text">电子支付</span>
          <span class="num">{{branchIncomeList.branchepay}}</span>
        </div>
        <div class="item">
          <span class="text">ETC</span>
          <span class="num">{{branchIncomeList.branchetc}}</span>
        </div>
        <div class="item">
          <span class="text">减免车辆</span>
          <span class="num">{{branchIncomeList.branchpass}}</span>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <!--    图标区域区域-->
    <div class="echarts" style="width: 100%;height: 200px" id="myChart">
    </div>
    <div class="line"></div>
    <div class="form">
      <div class="title">
        收入统计分析表
      </div>
      <div class="content">
        <div class="title">
          <span>日期</span>
          <span>今日金额(元)</span>
          <span>昨日金额(元)</span>
          <span>环比</span>
        </div>
        <div class="body">
          <div class="item" v-for="(item, index) in branchIncomeList.dayincome" :key="index">
            <div class="date">
              <span class="day">{{index}}时</span>
            </div>
            <div class="money">{{item}}</div>
            <div class="yes">{{branchIncomeList.yesterdayincome[index]}}</div>
            <div class="compare" :class="rateList[index] < 0 ? 'red': ''">{{rateList[index] | keepTwoNum}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../../../../components/Header/Header'
import echarts from 'echarts'
export default {
  name: 'SubCenterDetail',
  data () {
    return {
      // 分中心id
      branchcode: '',
      // 分中心名称
      branchname: '',
      // 分中心详情收入列表
      branchIncomeList: {},
      // 小时收入数组
      hoursIncome: [],
      // 昨日小时收入和今日小时收入环比数组
      rateList: [],
      startValue: '', // 输入框默认值
      endValue: '',
      currentTime: new Date(), // 开始时间不能超过当前时间
      startTime: new Date(), // 开始时间
      endTime: new Date(), // 开始时间
      showStart: false, // 用来显示弹出层
      showEnd: false
    }
  },
  created () {
    // 在这里接收收入页面传递过来的分中心id和名称
    this.branchcode = this.$route.query.branchcode
    this.branchname = this.$route.query.branchname
  },
  components: {
    Header
  },
  mounted () {
    // 绘制echarts图标
    this.drawLine()
    // 查看分中心信息
    this.getBranchInfo()
    this.timeFormat(new Date())
  },
  methods: {
    drawLine () {
      this.chartLine = echarts.init(document.getElementById('myChart'))
      const option = {
        title: {
          text: '占比',
          left: 15,
          top: 12
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#f5685f', '#c870d9', '#49a9ee', '#59d5c5'], // 指定扇形区域的颜色
        legend: {
          orient: 'vertical',
          // top: 'middle',
          left: 'center',
          data: ['现金', '减免车辆', '电子支付', 'ETC'],
          selectedMode: false, // 知否显示item名称
          show: false
        },
        series: [
          {
            type: 'pie',
            name: '占比',
            radius: ['45%', '70%'],
            data: this.datas,
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    },
    onChange () {
    },
    // 根据分中心编号，查看分中心收入情况
    async getBranchInfo () {
      const result = await this.$http.post('/api/fictitious/PostBranch', { branchcode: this.branchcode })
      this.branchIncomeList = result.data.data
      console.log(this.branchIncomeList)
      const obj = this.branchIncomeList.typeproportion
      console.log(obj)
      const arr = Object.entries(obj)
      console.log(arr)
      const newArr = []
      for (let i = 0; i < arr.length; i++) {
        const name = arr[i][0]
        const value = arr[i][1]
        const aa = {
          formatter: function (params) {
            return name + '\n\n' + +value
          }
        }
        const label = aa
        newArr.push({ name, value, label })
      }
      console.log(newArr)
      this.datas = newArr
      this.drawLine()

      for (let i = 0; i < this.branchIncomeList.yesterdayincome.length; i++) {
        // eslint-disable-next-line no-unused-vars
        // 计算出环比的比例,然后存放到比例数组里面
        const rate = ((this.branchIncomeList.dayincome[i] - this.branchIncomeList.yesterdayincome[i]) / this.branchIncomeList.yesterdayincome[i]) * 100
        this.rateList.push(rate)
      }
    },
    showStartTime () {
      this.showStart = true
    },
    showEndTime () {
      this.showEnd = true
    },
    // 选择开始时间时确认按钮
    confirmStartFn (val) { // 确定按钮
      this.startValue = this.timeFormat(this.startTime)
      this.showStart = false
    },
    confirmEndFn () {
      this.endValue = this.timeFormat(this.endTime)
      this.showEnd = false
      console.log(this.endValue)
      this.getHours()
      // 查看分中心信息
      this.getBranchInfo()
    },
    cancelFn () {
      this.showStart = false
    },
    timeFormat (time) { // 时间格式化 2019-09-08
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      return year + '-' + month + '-' + day
    },
    // 获取分中心小时统计数据
    async getHours () {
      const result = await this.$http.post('/api/twoController/Posthours', {
        tollboothidOrCenterid: this.branchcode,
        tollboothtypeOrCentertype: 1,
        starttime: new Date(this.startValue),
        endtime: new Date(this.endValue)
      })
      // console.log(result)
      this.branchIncomeList.dayincome = result.data.data.housecount
    }
  }
}
</script>

<style scoped lang="less">
  .detail {
    #date_time_picker {
      display: flex;
      flex: 1;
    }

    .detail-header {
      overflow: hidden;
      height: 330px / 2;
      background: linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);
      background: -webkit-linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);
      background: -ms-linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);
      background: -webkit-linear-gradient(to bottom, #4885f2, #4278ed, #3563e5);

      .date {
        display: flex;
        margin-top: 15px;
        margin-bottom: 23px;
        font-size: 15px;
        color: #fff;

        span {
          position: relative;
          flex: 1;
          text-align: center;

          &::after {
            position: absolute;
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            background: url("../../../../../assets/icons/白色返回.png") 50% 50% no-repeat;
            transform: rotate(180deg);
            top: 0;
            left: 76px;
          }
        }
      }

      .total-money {
        margin-top: 20px;
        margin-bottom: 17px;
        font-size: 45px;
        color: #fefefe;
        text-align: center;
      }

      .total-income {
        font-size: 10px;
        text-align: center;
        color: #fffffd;
      }

      .style {
        padding: 0 29px;
        color: #fff;
        margin-top: 17px;
        font-size: 12px;

        .item {
          float: left;
          width: 50%;

          /* &:nth-child(odd) {
             margin-right: 234px / 2;
           }*/

          &:nth-child(-n+2) {
            margin-bottom: 14px;
          }
        }

        .text {
          margin-right: 9px;
        }
      }
    }

    .line {
      width: 100%;
      height: 15px;
      background-color: #f5f5f6;
    }

    .echarts {
      position: relative;
      height: 376px /2;

      .outer {
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        height: 318px / 2;
        width: 318px / 2;
        border-radius: 50%;

        .cash {
          width: 318px /2;
          border: solid 50px transparent;
          border-right-color: orange;
          border-radius: 50%;
        }
      }
    }

    .form {
      .title {
        font-size: 16px;
        height: 74px / 2;
        line-height: 37px;
        color: #454545;
        padding-left: 15px;
      }

      .content {
        .title {
          font-size: 14px;
          height: 31px;
          line-height: 31px;
          background-color: #e9e9ea;
          color: #6e6e6f;
          text-align: center;

          span {
            float: left;
            width: 25%;
          }
        }

        .body {
          padding: 0 15px;
          text-align: center;

          .item {
            height: 37px;
            line-height: 37px;
            font-size: 13px;
            border-bottom: 1px solid #dfdfdf;

            .date, .money,.yes, .compare {
              height: 37px;
              line-height: 37px;
              float: left;
              text-align: center;
              width: 25%;
            }

            .date {
              color: #212121;

              .day {
                margin-right: 10px;
              }
              .yes{
                margin-right: 10px;
              }
            }

            .money {
              color: #202020;
            }

            .red {
              color: red;
            }
          }
        }
      }
    }
  }
</style>
